<script setup lang="ts">
import { ref, watch } from 'vue'

const count = ref(100)
const intro = ref('我是MT')

const change = () => {
  count.value++
  intro.value = '' + Math.random()
}

// 1. 使用watch去监听一个响应式数据的变化
// watch(count, (newValue, oldValue) => {
//   // console.log('变了' + Math.random());
//   console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
// })

// 2. 使用watch去监听多个响应式数据变化
watch([count, intro], (newValue, oldValue) => {
  console.log(newValue, oldValue);
})
</script>

<template>
  <div class="app-page">
    <div>{{ count }}</div>
    <div>{{ intro }}</div>
    <button @click="change">变</button>
  </div>
</template>

<style lang="css" scoped></style>
